/*
 * @Author: liu.wang 1947389483@qq.com
 * @Date: 2025-01-21 14:40:50
 * @LastEditors: liu.wang 1947389483@qq.com
 * @LastEditTime: 2025-02-06 15:09:42
 * @FilePath: \vue-design\一、框架设计概览\01、权衡的艺术\04、运行时和编译时.js
 * @Description: 
 */


/***
 * 运行时
 * 
 * 运行时+编译时
 * 
 * 编译时
 * 
 * 
 */


// 运行时

/**
 * 
 * 
    框架： 提供了render函数，用户为该函数提供一个树型结构的数据对象
    render函数会根据该对象递归的将数据渲染成DOM元素

    const obj = {
        tag: 'div',
        children: [
            { tag: 'span', children: 'hello world' }
        ]
    }
    每个对象有两个属性
        tag：标签名称
        children：数组（子节点） 文本（文本子节点）



    function Render(obj, root) {
        const el = document.createElement(obj.tag)
        if (typeof obj.children === 'string') {
            const text = document.createTextNode(obj.children)
            el.appendChild(text)
        } else if (obj.children) {
            // 数组，递归调⽤ Render，使⽤ el 作为 root 参数
            obj.children.forEach((child) => Render(child, el))
        }

        // 将元素添加到 root
        root.appendChild(el)
    }



    const obj = {
        tag: 'div',
        children: [
            { tag: 'span', children: 'hello world' }
        ]
    }
    // 渲染到 body 下
    Render(obj, document.body)


    
 */

        